<template>
    <div>
        <div class="markdown-body">
            <CodeTpl></CodeTpl>
        </div>
        <VoSchemaForm :model="model" :schema="schema"></VoSchemaForm>
        <div>
            <pre>{{modelJson}}</pre>
        </div>
    </div>
</template>

<script>
import CodeTpl from './md/sf.md';
export default {
    components: {
        CodeTpl
    },
    data() {
        return {
            model: {
                info: {}
            },
            schema: {
                properties: {
                    name1: {
                        widget: 'input', // 会渲染成 el-input 输入框
                        label: '名字',
                        ui: {
                            placeholder: '请输入名字',
                            clearable: true,
                            disabled: false
                        },
                        on: {
                            input: (e) => {
                                console.log('触发input事件', e)
                            }
                        }
                    },
                    name2: {
                        widget: 'select', // 会渲染成 el-select 下拉选择框
                        label: '学历',
                        enum: [
                            { label: '小学', value: 'A' },
                            { label: '初中', value: 'B' },
                            { label: '高中', value: 'C' },
                            { label: '专科', value: 'D' },
                            { label: '本科', value: 'E' },
                            { label: '博士', value: 'F' },
                            { label: '硕士', value: 'G' }
                        ],
                        // enum or asyncData
                        asyncData(cb) {
                            // cb([
                            //     { label: '篮球', value: 'A' },
                            //     { label: '乒乓球', value: 'B' },
                            //     { label: '跳舞', value: 'C' },
                            //     { label: '打游戏', value: 'D' }
                            // ])
                            // cb or Promise
                            return new Promise(resolve => {
                                resolve([
                                    { label: '篮球', value: 'A' },
                                    { label: '乒乓球', value: 'B' },
                                    { label: '跳舞', value: 'C' },
                                    { label: '打游戏', value: 'D' }
                                ])
                            })
                        },
                        ui: {
                            placeholder: '请选择学历',
                            clearable: true,
                            disabled: false
                        },
                        on: {
                            change: (e) => {
                                console.log('触发change事件', e)
                            }
                        }
                    },
                    name3: {
                        widget: 'datePicker', // 会渲染成 el-date-picker 日期选择框
                        label: '生日',
                        ui: {
                            valueFormat: 'yyyy-MM-dd'
                        }
                    },
                    'info.phone': {
                        widget: 'input',
                        label: '手机号',
                        ui: {
                            placeholder: '请输入手机号'
                        }
                    }
                },
                ui: {
                    labelWidth: 100,
                    size: 'small',
                    labelPosition: 'center'
                },
                row: {
                    gutter: 20
                },
                col: {
                    span: 12,
                    xs: 24,
                    sm: 12,
                    md: 8,
                    lg: 6,
                    xl: 6
                },
                order: ['name2', 'name1']
            }
        }
    },
    computed: {
        modelJson() {
            return JSON.stringify(this.model, null, 4)
        }
    }
}
</script>

<style>

</style>
